import React from 'react';
import 'styles/my-account/components/expense-type-tip.scss'

/**
 * 选中文案高亮且在可视范围之内
 */
class ExpenseTypeTip extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      keyWord: '',
      text: '',
      hasMore: false,
      hasStart: false,
      isInit: false
    };
    this.textWrapDom = '';
    this.textDom = '';
  }

  componentDidMount() {
    this.setState({
      keyWord: this.props.params.keyWord,
      text: this.props.params.text,
    }, () => {
      this.initHandleShow()
    });
  }

  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps.params)
    this.setState({
      keyWord: nextProps.params.keyWord,
      text: nextProps.params.text,
    }, () => {
      this.initHandleShow()
    });
  }
  initHandleShow = () => {
    this.setState({hasMore: false, hasStart: false, isInit: false}, () => {
      try {
        let textWidth = this.textDom.offsetWidth;
        let textWrapWidth = this.textWrapDom.offsetWidth;
        let searchDom = this.textDom.querySelector('.search-text');
        if (textWidth > textWrapWidth) {
          // 存在搜索词处理
          if (searchDom) {
            let searchDomLeft = searchDom.offsetLeft;
            let searchDomWidth = searchDom.offsetWidth;
            let left = 0;
            let hasStart = false;
            let hasMore = false;
            // 搜索词在结尾处理
            if (searchDomLeft + searchDomWidth > textWidth - 60) {
              hasStart = true;
              left = textWidth;
            } else if (searchDomLeft > textWrapWidth) {
              // 搜索词在中间处理
              hasStart = true;
              hasMore = true;
              left = searchDomLeft - textWrapWidth / 2;
            } else {
              hasMore = true;
            }
            this.setState({hasStart, hasMore}, () => {
              this.textWrapDom.scrollTo(left, 0);
              this.setState({isInit: true})
            });
          } else {
            this.setState({hasMore: true}, () => {
              this.textWrapDom.scroll(0, 0);
              this.setState({isInit: true})
            })
          }
        } else {
          this.setState({hasMore: false}, () => {
            this.textWrapDom.scroll(0, 0);
            this.setState({isInit: true})
          })
        }
      }catch (e) {}
    });
  };
  render() {
    const {text, keyWord, isInit, hasStart, hasMore} = this.state;
    let showHtml = '';
    try {
      showHtml = text.replace(keyWord, `<span class="search-text">${keyWord}</span>`);
    }catch (e) {}
    return (<div className="type-tip-wrap">
      <div className="scroll-wrap">
        <p className={isInit ? 'text-wrap is-init' : 'text-wrap'}
           ref={textWrapDom => this.textWrapDom = textWrapDom}>
          {hasStart && (<span className="has-start">...</span>)}
          <span ref={textDom => this.textDom = textDom}
                className='text-con'
                dangerouslySetInnerHTML={{__html: showHtml}}>
          </span>
          {hasMore && (<span className="has-more">...</span>)}
        </p>
      </div>
    </div>)
  }
}

export default ExpenseTypeTip;

